<template>
  <div class="main">
    <!-- 动态组件 -->
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
    <tab-bar @onChangeFragment="onChangeFragment" />
  </div>
</template>

<script>
import TabBar from '@/layout/components/TabBar'
export default {
  name: 'Main',
  components: {
    TabBar,
    'Home': () => import('@/views/home/index'),
    'Message': () => import('@/views/message/index'),
    'Mine': () => import('@/views/mine/index'),
  },
  data() {
    return {
      currentComponent: 'Home'
    }
  },
  methods: {
    // 组件切换
    onChangeFragment(componentName) {
      // console.log(componentName)
      this.currentComponent = componentName;
    }
  }
}
</script>

<style lang="scss" scoped>
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
</style>
